<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>仲裁列表</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
      body{background:#FFF;}
      .tableTitle .back{
        width:1.2rem;
        height:1rem;
        position:absolute;
        left:0;
        top:0;
      }
      .tableTitle .back img{
        vertical-align: middle;
        height:0.33rem;
        margin-top:-0.02rem;
        margin-right:0.2rem;
      }
      #header{
        border-bottom:1px solid #F9F9F9;
      }
	  .tableTitle a.hover:after{
			left:40%!important; 
			width:30%!important;
		}
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div id="header">
            <div class="commonStatusTitle">
                <h3 class="tableTitle clearfix" @scroll.prevent @touchmove.prevent>
                    <div class="back" @click="api.closeWin();"><img src="../../../image/icons/left.png" /></div>
                    <a @click="onTabNav(0)" :class="{'hover': report == 0}">被举报</a>
                    <a @click="onTabNav(1)" :class="{'hover': report == 1}">我举报</a>
                </h3>
                <div class="status">
                    <a @click="changeTab(item.status)" :class="{'hover': status == index}" v-for="(item, index) in tabStatus[report]">{{item.text}}</a>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var app = new Vue({
                el:'#app',
                data:{
                    report: 0,
                    status: 0,
                    statusVal: '',
                    tabStatus: {
                        // 被举报，接单人
                        0: [
                            {text: '全部', status: 0, statusVal: ''},
                            {text: '待审核', status: 1, statusVal: '0'},
                            {text: '待复审', status: 2, statusVal: '4,5'},
                            {text: '胜诉', status: 3, statusVal: '2'},
                            {text: '败诉', status: 4, statusVal: '1'},
                            {text: '判平', status: 5, statusVal: '6,7'},
                        ],
                        // 我举报，派单人
                        1: [
                            {text: '全部', status: 0, statusVal: ''},
                            {text: '待审核', status: 1, statusVal: '0'},
                            {text: '待复审', status: 2, statusVal: '3,5'},
                            {text: '胜诉', status: 3, statusVal: '1'},
                            {text: '败诉', status: 4, statusVal: '2'},
                            {text: '判平', status: 5, statusVal: '6,7'},
                        ]
                    },
					iosTest:false,
                },
                methods:{
                    onTabNav: function(index){
                        this.report = index;
                        this.status = 0;
                        this.statusVal = this.tabStatus[this.report][0].statusVal;
                        this.emitEvent();
                    },
                    changeTab: function(status){
                        this.status = status;
                        this.statusVal = this.tabStatus[this.report][status].statusVal;
                        this.emitEvent();
                    },
                    emitEvent: function(){
                        api.sendEvent({
                            name: 'arbitrationListChange',
                            extra: {
                                report: this.report,
                                status: this.statusVal
                            }
                        });
                    },
                },
                mounted(){
					$.initJs(this);

                }
            });

            api.openFrame({
                name: api.pageParam.page,
                url: 'widget://html/content/' + api.pageParam.page + '.html',
                softInputBarEnabled:api.pageParam.data.softInputBarEnabled || false,
                softInputDismissMode:api.pageParam.data.softInputDismissMode || ['tap','drag'],
                pageParam: {
                    data:api.pageParam.data
                },
                bgColor:"#F9F9F9",
                useWKWebView:true,
                rect: $.rect()
            });
        }
    </script>
</body>
</html>
